<template>
  <div class="houseHoldContainer">
    <div>
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a56b920bc83820736d2260c58858bf4.jpg?f=webp"
        alt=""
        class="img"
      />
    </div>
    <div class="container">
      <div
        class="main"
        v-for="houseHoldItem in houseHold.bigImg"
        :key="houseHoldItem.id"
      >
        <img :src="houseHoldItem.image" alt="" class="img" />
        <div class="containerList">
          <div
            class="containerItem"
            v-for="item in houseHoldItem.items"
            :key="item.product_id"
          >
            <img :src="item.img_url" alt="" />
            <div class="bottom">
              <span>{{ item.product_name }}</span>
              <i>{{ item.product_brief }}</i>
              <div class="price">
                <span>￥{{ item.show_price }}</span>
                <i>￥{{ item.market_price }}</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ba8bdf58eee181e2fe21f4ce2788a0a.jpg?f=webp"
        alt=""
        class="img"
      />
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47ab94753758ce86f7e2cc9ef205d8a.jpg?f=webp"
        alt=""
        class="img"
      />
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/050dbb577b3ef8f1b8d8675e72a7e167.jpg?f=webp"
        alt=""
        class="img"
      />
      <div class="bottomList">
        <div
          class="bottomItem"
          v-for="item in houseHold.items"
          :key="item.product_id"
        >
          <img :src="item.img_url" alt="" />
          <div class="bottom">
            <span>{{ item.product_name }}</span>
            <i>{{ item.product_brief }}</i>
            <div class="price">
              <span>￥{{ item.show_price }}</span>
              <i>￥{{ item.market_price }}</i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Household",
  created() {
    this.$store.dispatch("getHouseHold");
  },
  computed: {
    ...mapState({
      houseHold: (state) => state.home.houseHold,
    }),
  },
};
</script>

<style scoped lang="less">
.houseHoldContainer {
  background-color: #e14139;
  width: 100%;
  .img {
    height: 0.65rem;
    width: 100%;
  }
  .container {
    .main {
      .containerList {
        display: flex;
        justify-content: space-around;
        .containerItem {
          width: 1.2rem;
          overflow: hidden;
          height: 1.65rem;
          border-radius: 0.05rem;
          background-color: #ffffff;
          img {
            border-radius: 0.05rem;
            width: 100%;
            height: 0.98rem;
          }
          .bottom {
            width: 100%;
            height: 0.66rem;
            padding: 0.09rem 0.04rem;
            display: flex;
            flex-direction: column;
            span {
              font-weight: 700;
              font-size: 0.14rem;
              text-align: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span + i {
              display: block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              text-align: center;
            }
            .price {
              display: flex;
              justify-content: center;
              span {
                color: #f54b4b;
              }
              i {
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
  .bottomList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .bottomItem {
      margin-bottom: 0.3rem;
      width: 1.2rem;
      overflow: hidden;
      height: 1.65rem;
      border-radius: 0.05rem;
      background-color: #ffffff;
      img {
        border-radius: 0.05rem;
        width: 100%;
        height: 0.98rem;
      }
      .bottom {
        width: 100%;
        height: 0.66rem;
        padding: 0.09rem 0.04rem;
        display: flex;
        flex-direction: column;
        span {
          font-weight: 700;
          font-size: 0.14rem;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        span + i {
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
        }
        .price {
          display: flex;
          justify-content: center;
          span {
            color: #f54b4b;
          }
          i {
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>